import React from 'react';
import { Button, Card, Modal } from 'antd';
import richEditor from '@/components/richEditor';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
export default class RichText extends React.Component {
  state = {
    showRichText: false,
    editorContent: '',
    editorState: '',
  };
  //清空
  handleClearContent = () => {
    this.setState({
      editorState: '',
    });
  };
  //获取html文本
  handleGetText = () => {
    this.setState({
      showRichText: true,
    });
  };

  onEditorChange = (editorContent: any) => {
    this.setState({
      editorContent,
    });
  };

  onEditorStateChange = (editorState: any) => {
    this.setState({
      editorState,
    });
  };
  //html剔除富文本标签，留下纯文本
  // getSimpleText = (html) => {
  // var re1 = new RegExp("<.+?>","g");//匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
  // var msg = html.replace(re1,'');//执行替换成空字符
  // return msg;
  // }
  render() {
    const { editorContent, editorState } = this.state;
    return (
      <div>
        <Card style={{ marginTop: 10 }}>
          <Button type="primary" onClick={this.handleClearContent}>
            清空内容
          </Button>
          <Button type="primary" onClick={this.handleGetText}>
            获取HTML文本
          </Button>
        </Card>
        <Card title="富文本编辑器">
          {/* 加粗 */}
          {/* <Editor
            editorState={editorState}
            onContentStateChange={this.onEditorChange}
            onEditorStateChange={this.onEditorStateChange}
          /> */}
          <RichText />
        </Card>
        <Modal
          title="富文本"
          visible={this.state.showRichText}
          onCancel={() => {
            this.setState({
              showRichText: false,
            });
          }}
          footer={null}
        >
          {/* {draftjs(this.state.editorContent)} */}
        </Modal>
        <Button>提交</Button>
        <Button>保存</Button>
      </div>
    );
  }
}
